<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>山羊の前端小窝 - 登录</title>
    <!-- 引入 Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- 替换为 unpkg 的 axios CDN -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<style>
    /* 样式保持不变 */
    * {
        padding: 0;
        margin: 0;
        outline: none;
        border: none;
    }

    body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgb(31, 32, 41);
    }

    .shell {
        width: 300px;
        height: 300px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
    }

    .bottom {
        width: 300px;
        height: 250px;
        background-image: url(./background.png);
        border-radius: 5px;
    }

    .bottom>div {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    }

    .bottom>div h2 {
        color: white;
    }

    .bottom>div input {
        width: 200px;
        height: 25px;
        padding: 0 10px;
        background-color: rgb(31, 32, 41);
        color: #fff;
    }

    .bottom>div button {
        width: 80px;
        height: 30px;
        color: #333;
        font-size: 15px;
        background-color: rgb(255, 235, 167);
        border-radius: 4px;
        transition: .3s;
        margin-bottom: 10px;
        cursor: pointer;
        box-shadow: 0 0 10px rgb(255, 235, 167);
    }

    .bottom>div button:hover {
        opacity: 0.9;
    }

    .bottom>div button:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .error-message {
        color: #ff6b6b;
        font-size: 12px;
        margin-top: -15px;
        margin-bottom: -10px;
        text-align: center;
        max-width: 80%;
    }

    .success-message {
        color: #51cf66;
        font-size: 12px;
        margin-top: -15px;
        margin-bottom: -10px;
        text-align: center;
        max-width: 80%;
    }
</style>

<body>
    <div id="app">
        <div class="shell">
            <div class="bottom">
                <div class="signIn">
                    <h2>Sign in</h2>
                    <input type="text" placeholder="Username" v-model="loginForm.username" @keyup.enter="handleLogin">
                    <input type="password" placeholder="Password" v-model="loginForm.password" @keyup.enter="handleLogin">
                    <p class="error-message" v-if="loginError">{{ loginError }}</p>
                    <p class="success-message" v-if="loginSuccess">{{ loginSuccess }}</p>
                    <button @click="handleLogin" :disabled="isLoggingIn">
                        {{ isLoggingIn ? 'Logging in...' : 'GO' }}
                    </button>
                </div>
            </div>
        </div>
    </div>
    <script>
        const { createApp, ref, reactive } = Vue;

        createApp({
            setup() {
                // 登录表单数据
                const loginForm = reactive({
                    username: '',
                    password: ''
                });

                const loginError = ref('');
                const loginSuccess = ref('');
                const isLoggingIn = ref(false);

                // 清除所有消息
                const clearMessages = () => {
                    loginError.value = '';
                    loginSuccess.value = '';
                };

                // 验证登录表单
                const validateLogin = () => {
                    if (!loginForm.username.trim()) {
                        loginError.value = '请输入用户名';
                        return false;
                    }
                    if (!loginForm.password) {
                        loginError.value = '请输入密码';
                        return false;
                    }
                    return true;
                };

                // 处理登录
                const handleLogin = async () => {
                    clearMessages();

                    if (!validateLogin()) {
                        return;
                    }

                    isLoggingIn.value = true;

                    try {
                        // 修复接口路径错误：添加斜杠 /
                        const response = await axios.post('http://localhost:8887/admin/adminLoginEnd', {
                            username: loginForm.username,
                            password: loginForm.password
                        });

                        // 打印后端返回的完整数据，用于调试
                        console.log('后端返回数据:', response.data);
						
                        // 明确判断 admin 数据是否存在
                        if (response.data && response.data.data && response.data.data.admin)  {
                            loginSuccess.value = '登录成功，正在跳转...';
							const admin = response.data.data.admin.username;
							localStorage.setItem('admin', admin);
                            // 延迟跳转，让用户看到成功提示
                            setTimeout(() => {
                                window.location.href = 'data.html';
                            }, 1000);
                        } else {
                            loginError.value = '用户名或密码错误';
                        }

                    } catch (error) {
                        console.error('登录错误详情:', error);
                        // 更详细的错误提示
                        if (error.response) {
                            // 服务器返回错误（如404, 500）
                            if (error.response.status === 404) {
                                loginError.value = '接口地址错误，请检查后端配置';
                            } else if (error.response.status === 500) {
                                loginError.value = '服务器内部错误，请查看后端日志';
                            } else {
                                loginError.value = `登录失败 (${error.response.status}): ${error.response.data.message || '未知错误'}`;
                            }
                        } else if (error.request) {
                            // 请求发送了但没收到响应
                            loginError.value = '未收到服务器响应，请检查后端是否启动';
                        } else {
                            // 其他错误
                            loginError.value = `请求失败: ${error.message}`;
                        }
                    } finally {
                        isLoggingIn.value = false;
                    }
                };

                return {
                    loginForm,
                    loginError,
                    loginSuccess,
                    isLoggingIn,
                    handleLogin
                };
            }
        }).mount('#app');
    </script>
</body>

</html>
